[class|=coco],
[class|=coco]::after,
[class|=coco]::before {
    box-sizing: border-box;
    outline: 0
}

.coco-msg-progress {
    width: 13px;
    height: 13px
}

.coco-msg__circle {
    stroke-width: 2;
    stroke-linecap: square;
    fill: none;
    transform: rotate(-90deg);
    transform-origin: center
}

.coco-msg-stage:hover .coco-msg__circle {
    -webkit-animation-play-state: paused !important;
    animation-play-state: paused !important
}

.coco-msg__background {
    stroke-width: 2;
    fill: none
}

.coco-msg-stage {
    position: fixed;
    top: 20px;
    left: 50%;
    width: auto;
    transform: translate(-50%, 0);
    z-index: 3000
}

@media screen and (max-width: 875px) {
    .coco-msg-stage {
        top: 10%;
    } 
}

.coco-msg-wrapper {
    position: relative;
    left: 50%;
    transform: translate(-50%, 0);
    transform: translate3d(-50%, 0, 0);
    transition: height .3s ease, padding .3s ease;
    padding: 6px 0;
    will-change: transform, opacity
}

.coco-msg {
    padding: 15px 21px;
    border-radius: 3px;
    position: relative;
    left: 50%;
    transform: translate(-50%, 0);
    transform: translate3d(-50%, 0, 0);
    display: flex;
    align-items: center
}

.coco-msg-content,
.coco-msg-icon,
.coco-msg-wait {
    display: inline-block
}

.coco-msg-icon {
    position: relative;
    width: 13px;
    height: 13px;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center
}

.coco-msg-icon svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 11px;
    height: 11px
}

.coco-msg-wait {
    width: 20px;
    height: 20px;
    position: relative;
    fill: #4eb127
}

.coco-msg-wait svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.coco-msg-close {
    width: 14px;
    height: 14px
}

.coco-msg-content {
    margin: 0 10px;
    min-width: 240px;
    text-align: left;
    font-size: 14px;
    font-weight: 500;
    font-family: -apple-system, Microsoft Yahei, sans-serif;
    text-shadow: 0 0 1px rgba(0, 0, 0, .01)
}

.coco-msg.info {
    color: #0fafad;
    background-color: #e7fdfc;
    box-shadow: 0 0 2px 0 rgba(0, 1, 1, .01), 0 0 0 1px #c0faf9
}

.coco-msg.info .coco-msg-icon {
    background-color: #0fafad
}

.coco-msg.success {
    color: #4ebb23;
    background-color: #f3ffe8;
    box-shadow: 0 0 2px 0 rgba(0, 1, 0, .01), 0 0 0 1px #d9f8bb
}

.coco-msg.success .coco-msg-icon {
    background-color: #4ebb23
}

.coco-msg.warning {
    color: #f1b306;
    background-color: #fff9eb;
    box-shadow: 0 0 2px 0 rgba(1, 1, 0, .01), 0 0 0 1px #fcf2cd
}

.coco-msg.warning .coco-msg-icon {
    background-color: #f1b306
}

.coco-msg.error {
    color: #f34b51;
    background-color: #fff7f7;
    box-shadow: 0 0 2px 0 rgba(1, 0, 0, .01), 0 0 0 1px #ffe3e3
}

.coco-msg.error .coco-msg-icon {
    background-color: #f34b51
}

.coco-msg.loading {
    color: #0fafad;
    background-color: #e7fdfc;
    box-shadow: 0 0 2px 0 rgba(0, 1, 1, .01), 0 0 0 1px #c2faf9
}

.coco-msg_loading {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    position: relative
}

.coco-msg-circular {
    -webkit-animation: coco-msg-rotate 2s linear infinite both;
    animation: coco-msg-rotate 2s linear infinite both;
    transform-origin: center center;
    height: 18px !important;
    width: 18px !important
}

.coco-msg-path {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    stroke: #0fafad;
    -webkit-animation: coco-msg-dash 1.5s ease-in-out infinite;
    animation: coco-msg-dash 1.5s ease-in-out infinite;
    stroke-linecap: round
}

@-webkit-keyframes coco-msg-rotate {
    100% {
        transform: translate(-50%, -50%) rotate(360deg)
    }
}

@keyframes coco-msg-rotate {
    100% {
        transform: translate(-50%, -50%) rotate(360deg)
    }
}

@-webkit-keyframes coco-msg-dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0
    }

    50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35px
    }

    100% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124px
    }
}

@keyframes coco-msg-dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0
    }

    50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35px
    }

    100% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124px
    }
}

.coco-msg.info .coco-msg-wait {
    fill: #0fafad
}

.coco-msg.success .coco-msg-wait {
    fill: #4ebb23
}

.coco-msg.warning .coco-msg-wait {
    fill: #f1b306
}

.coco-msg.error .coco-msg-wait {
    fill: #f34b51
}

.coco-msg.loading .coco-msg-wait {
    fill: #0fafad
}

.coco-msg-pointer {
    cursor: pointer
}

@-webkit-keyframes coco-msg_info {
    0% {
        stroke: #0fafad
    }

    to {
        stroke: #0fafad;
        stroke-dasharray: 0 100
    }
}

@keyframes coco-msg_info {
    0% {
        stroke: #0fafad
    }

    to {
        stroke: #0fafad;
        stroke-dasharray: 0 100
    }
}

@-webkit-keyframes coco-msg_success {
    0% {
        stroke: #4eb127
    }

    to {
        stroke: #4eb127;
        stroke-dasharray: 0 100
    }
}

@keyframes coco-msg_success {
    0% {
        stroke: #4eb127
    }

    to {
        stroke: #4eb127;
        stroke-dasharray: 0 100
    }
}

@-webkit-keyframes coco-msg_warning {
    0% {
        stroke: #fcbc0b
    }

    to {
        stroke: #fcbc0b;
        stroke-dasharray: 0 100
    }
}

@keyframes coco-msg_warning {
    0% {
        stroke: #fcbc0b
    }

    to {
        stroke: #fcbc0b;
        stroke-dasharray: 0 100
    }
}

@-webkit-keyframes coco-msg_error {
    0% {
        stroke: #eb262d
    }

    to {
        stroke: #eb262d;
        stroke-dasharray: 0 100
    }
}

@keyframes coco-msg_error {
    0% {
        stroke: #eb262d
    }

    to {
        stroke: #eb262d;
        stroke-dasharray: 0 100
    }
}

.coco-msg-fade-in {
    -webkit-animation: coco-msg-fade .2s ease-out both;
    animation: coco-msg-fade .2s ease-out both
}

.coco-msg-fade-out {
    animation: coco-msg-fade .3s linear reverse both
}

@-webkit-keyframes coco-msg-fade {
    0% {
        opacity: 0;
        transform: translate(-50%, 0);
        transform: translate3d(-50%, -80%, 0)
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
        transform: translate3d(-50%, 0, 0)
    }
}

@keyframes coco-msg-fade {
    0% {
        opacity: 0;
        transform: translate(-50%, 0);
        transform: translate3d(-50%, -80%, 0)
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
        transform: translate3d(-50%, 0, 0)
    }
}